import React from "react";
import axios from "axios";

export default function App() {
  const sendGet = async () => {
    //1 xhr
    // const xhr = new XMLHttpRequest();
    // xhr.responseType = 'json';
    // xhr.open('get','http:127.0.0.1/scoreList?sex=男&age=12')
    // xhr.send();
    // xhr.onload = function () {
    //     console.log(xhr.response);
    // }

    //2 get
    // axios.get('http://127.0.0.1/scoreList?sex=男&age=12')
    // axios.get('http://127.0.0.1/scoreList', {
    //     params: {
    //         sex: '男',
    //         age:12
    //     }
    // }).then(value => {
    //     console.log(value.data)
    // })

    // axios('http://127.0.0.1/scoreList', {
    //     params: {
    //         sex: "男",
    //         age:12
    //     }
    // }).then(value => {
    //     console.log(value.data)
    // })

    // axios({
    //     url: "http://127.0.0.1/scoreList",
    //     params: {
    //         sex: "男",
    //         age:12
    //     }
    // })

    //3-fetch
    // 3-1:fetch是window下的属性,类型是一个方法
    // console.log(window.fetch)
    // 3-2:fetch接收一个地址
    // fetch('http://127.0.0.1/scoreList?age=12').then(value=>{
    //     value.json().then(res)=> {
    //         console.log(res);
    //     }
    //     value.text().then(res => {
    //         console.log(res)
    //     })
    // })

    // fetch('http://127.0.0.1/scoreList?age=12')
    //     .then(value => value.json())
    //     .then(res => {
    //         console.log(res)
    //     })

    // const value = await fetch('http://127.0.0.1/scoreList?age=12')
    // const res = await value.json();
    // console.log(res);

    const res = await fetchRequest("http://127.0.0.1/scoreList?age=12");
    console.log(res);
    };
    
    const sendPost = ()=>{
        // xhr:http://127.0.0.1/scoreList  post    application/json
        // const xhr = new XMLHttpRequest();
        // xhr.open("post","http://127.0.0.1/scoreList");
        // xhr.setRequestHeader("Content-Type","application/json");
        // xhr.send(JSON.stringify({
        //     a:1,
        //     b:2
        // }));
        // xhr.onload = function(){
        //     console.log(xhr.response);
        // }


        // application/x-www-form-urlencoded
        // const xhr = new XMLHttpRequest();
        // xhr.open("post","http://127.0.0.1/scoreList");
        // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        // xhr.send("userName=古天乐");
        // xhr.onload = function(){
        //     console.log(xhr.response);
        // }

        // axios: Content-Type:application/json
        // axios.post("http://127.0.0.1/scoreList",{
        //     a:1,
        //     b:2
        // })

        // axios:Content-Type:application/x-www-form-urlencoded

        // axios.post("http://127.0.0.1/scoreList","userName=古巨基")


        // fetch
        fetch("http://127.0.0.1/scoreList",{
            method:"post",// 请求方式
            headers:{// 请求头
                "Content-Type":"application/json"
            },
            body:JSON.stringify({// 请求体
                a:100,
                b:200
            })
        }).then(value=>value.json)
            .then(res=>{
                console.log(res);// 响应体
            });
    }
    return (
        <div>
            <button onClick={sendGet}>get</button>
            <button onClick={sendPost}>post</button>
            <button>put</button>
            <button>delete</button>
            <button onClick={() => {
                const xhr = new XMLHttpRequest();
                xhr.open("PATCH", "http://127.0.0.1/scoreList/1");
                xhr.setRequestHeader("Content-Type", "application/json");
                xhr.send(JSON.stringify({
                    userName: "刘德华"
                }));
            }}>patch
            </button>
        </div>
    );
}
